<template>
  <header>
    <div class="name">
      后台管理系统
    </div>
    <div class="user_info">
      <el-dropdown trigger="hover" @command="handleCommand">
        <span class="el-dropdown-link username">
          {{username}}
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="message">我的消息</el-dropdown-item>
          <el-dropdown-item disabled command="settings">设置</el-dropdown-item>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>
<script>

  export default {
    data: function () {
      return {
        hello: 'header'
      }

    },
    computed: {
      username() {
        return this.$store.getters.getUsername;
      }
    },
    methods: {
      logout() {
        localStorage.setItem('username', '')
        this.$router.push('/login')
      },
      handleCommand(command) {
        if (command === 'logout') {
          this.logout();
        }
      }
    }
  }
</script>
<style>
  header {
    height: 50px;
    width: 100%;
    font-size: 22px;
    background-color: #242f42;
    line-height: 50px;
    color: #fff;
  }

  .name {
    float: left;
    margin-left: 50px;

  }

  .user_info {
    float: right;
    margin-right: 20px;
  }

  .username {
    color: #fff;
  }

</style>

